<template>
  <div class="container">
    <el-dialog
      :title="!dataForm.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
        <el-form-item v-show="!dataForm.id" label="车牌号" prop="vehicleId">
          <el-select v-model="dataForm.vehicleId" filterable remote :remote-method="getPlateNumberListByKey" placeholder="机动车车牌号">
            <el-option v-for="vehicle in vehicleList" :key="vehicle.id" :label="vehicle.plateNumber" :value="vehicle.id" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="!dataForm.id" label="违章时间" prop="violationTime">
          <el-date-picker v-model="dataForm.violationTime" placeholder="违章时间" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="违章地点" prop="violationAddress">
          <el-input v-model="dataForm.violationAddress" placeholder="违章地点" @focus="mapContainerVisible = true"></el-input>
        </el-form-item>
        <el-form-item v-show="!dataForm.id" label="违章类型" prop="violationTypeId">
          <el-select v-model="dataForm.violationTypeId" placeholder="违章类型">
            <el-popover v-for="violationType in violationTypeList"  trigger="hover" placement="right" :key="violationType.id">
              <el-option slot="reference" :label="violationType.violationTypeName" :value="violationType.id" />
              <div class="content">
                <div class="fine-amount">罚金：{{ violationType.fineAmount
                  }}元</div>
                <div class="score">需扣分数：{{ violationType.score }}</div>
                <div class="description">描述：{{ violationType.description }}</div>
              </div>
            </el-popover>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="description">
          <el-input v-model="dataForm.description" placeholder="说明"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    </el-dialog>

    <!--地图选点组件-->
    <map-container @getAddress="getAddress" @close="mapContainerVisible = false" v-if="mapContainerVisible" />
  </div>
</template>

<script>
  import MapContainer from '../../../components/map/MapContainer.vue'
  export default {
    data () {
      return {
        visible: false,
        mapContainerVisible: false,
        dataForm: {
          id: 0,
          userId: '',
          vehicleId: '',
          violationTime: '',
          violationAddress: '',
          violationTypeId: '',
          description: '',
          violationDeadline: ''
        },
        dataRule: {
          userId: [
            { required: true, message: '用户不能为空', trigger: 'blur' }
          ],
          vehicleId: [
            { required: true, message: '车牌号不能为空', trigger: 'blur' }
          ],
          violationTime: [
            { required: true, message: '违章时间不能为空', trigger: 'blur' }
          ],
          violationAddress: [
            { required: true, message: '违章地点不能为空', trigger: 'blur' }
          ],
          violationTypeId: [
            { required: true, message: '违章类型不能为空', trigger: 'blur' }
          ]
        },
        userList: [],
        vehicleList: [],
        violationTypeList: [],
        dictList: []
      }
    },
    components: {
      MapContainer
    },
    methods: {
      // 获取角色为机动车车主的用户
      getUserList () {
        this.$http({
          url: this.$http.adornUrl('/mvs/owner/list'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.userList = data.userList
          } else {
            this.userList = []
          }
        })
      },
      // 根据用户id获取车牌号
      getPlateNumberList () {
        this.$http({
          url: this.$http.adornUrl('/mvs/vehicle/list/plateNumber'),
          method: 'get',
          params: this.$http.adornParams({
            'userId': this.dataForm.userId
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.vehicleList = data.vehicleList
          } else {
            this.vehicleList = []
          }
        })
      },
      // 根据关键字查询车牌号
      getPlateNumberListByKey (key) {
        this.$http({
          url: this.$http.adornUrl('/mvs/vehicle/list/query'),
          method: 'get',
          params: this.$http.adornParams({
            'key': key,
            'limit': 10
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.vehicleList = data.vehicleList
          } else {
            this.vehicleList = []
          }
        })
      },
      // 获取违章类型名称
      getViolationTypeNameList () {
        this.$http({
          url: this.$http.adornUrl('/mvs/violationType/list/violationTypeName'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.violationTypeList = data.violationTypeList
          } else {
            this.violationTypeList = []
          }
        })
      },
      // 获取违章记录状态
      getViolationStatusList () {
        this.$http({
          url: this.$http.adornUrl('/sys/dict/list/violationStatus'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dictList = data.dictList
          } else {
            this.dictList = []
          }
        })
      },
      init (id) {
        // this.getUserList()
        this.getViolationTypeNameList()
        this.getViolationStatusList()
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/mvs/violation/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.userId = data.violation.userId
                this.dataForm.vehicleId = data.violation.vehicleId
                this.dataForm.violationTime = data.violation.violationTime
                this.dataForm.violationAddress = data.violation.violationAddress
                this.dataForm.violationTypeId = data.violation.violationTypeId
                this.dataForm.description = data.violation.description
                this.dataForm.violationDeadline = data.violation.violationDeadline
                this.dataForm.violationStatus = data.violation.violationStatus
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/mvs/violation/${!this.dataForm.id ? 'save' : 'update'}`),
              method: !this.dataForm.id ? 'post' : 'put',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'userId': this.dataForm.userId,
                'vehicleId': this.dataForm.vehicleId,
                'violationTime': this.dataForm.violationTime,
                'violationAddress': this.dataForm.violationAddress,
                'violationTypeId': this.dataForm.violationTypeId,
                'description': this.dataForm.description,
                'violationDeadline': this.dataForm.violationDeadline
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 获取地址
      getAddress (info) {
        this.$refs.dataForm.clearValidate()
        this.dataForm.violationAddress = info.address
      }
    }
  }
</script>
